<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="success" size="default" @click="editAddress"
          >新增地址</el-button
        >
      </div>
      <el-table border :data="tableList" style="width: 100%">
        <el-table-column type="index" label="#" align="center">
        </el-table-column>
        <el-table-column prop="addressName" label="地址名称" align="center">
        </el-table-column>
        <el-table-column label="默认发货地址" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.sendStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeInitSendAddress(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="收货人姓名" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="收货人电话" align="center">
        </el-table-column>
        <el-table-column label="收货人地址" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.province + scope.row.region + scope.row.detailAddress
              }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="默认收货地址" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.receiveStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeInitReceiveAddress(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="default"
              @click="editAddress(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="default"
              @click="delAddress(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
      title="地址详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="listForm"
        label-width="100px"
        :inline="false"
        size="normal"
        :rules="rules"
        ref="ruleForm"
      >
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="发货地址" prop="addressName">
              <el-input
                v-model="listForm.addressName"
                placeholder=""
                size="normal"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="发货人姓名" prop="name">
              <el-input
                v-model="listForm.name"
                placeholder=""
                size="normal"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="发货人手机号">
              <el-input
                v-model="listForm.phone"
                placeholder=""
                size="normal"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="邮政编码">
              <el-input
                v-model="listForm.postCode"
                placeholder=""
                size="normal"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="收货地址">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="6">
            <el-form-item label="详细地址">
              <el-input
                v-model="listForm.detailAddress"
                placeholder=""
                size="normal"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose2">取 消</el-button>
        <el-button type="primary" @click="doSaveAddress">确 定</el-button>
      </span>
    </el-dialog>

    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import buttomBanner from "@/components/buttomBanner";
import {
  addressList,
  setSendOne,
  setReceiveOne,
  companyAddress,
  getAddressDetail,
  update,
  save,
} from "@/api/order/orderAddress/orderAddress.js";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      num: "",
      options: regionData,
      selectedOptions: [],
      tableList: [],
      listForm: {},
      dialogVisible: false,
      rules: {
        addressName: [
          { required: true, message: "请输入发货地址", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入发货人姓名", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    buttomBanner,
  },
  // computed:{
  //   isAllChecked:{
  //     get(){
  //       return this.list.every(el=>el.isChecked)
  //     },
  //     set(v){
  //       this.list.forEach(el => {
  //         el.isChecked = v
  //       });
  //     }
  //   }
  // },
  methods: {
    // 改变默认发货地址
    changeInitSendAddress(item) {
      var send = {
        id: item.id,
        sendStatus: item.sendStatus,
      };
      setSendOne(send).then((res) => {
        if (res.success) {
          this.$message.success("修改收货成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 改变默认收货地址
    changeInitReceiveAddress(item) {
      var receive = {
        id: item.id,
        receiveStatus: item.receiveStatus,
      };
      setReceiveOne(receive).then((res) => {
        if (res.success) {
          this.$message.success("修改发货成功");
          this.init();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 去往编辑和新增地址
    editAddress(item) {
      if (item.id) {
        getAddressDetail(item.id).then((res) => {
          if (res.success) {
            this.listForm = res.data.address;
            this.selectedOptions = this.listForm.cityCode.split(",");
            this.dialogVisible = true;
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        this.listForm = {};
        this.dialogVisible = true;
        this.num = 1;
      }
      
    },
    // 弹窗关闭提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$message.error("您已取消");
          this.$refs.ruleForm.clearValidate()
          done();
        })
        .catch((_) => {});
    },
    // 弹窗点击取消提示
    handleClose2() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.dialogVisible = false;
          this.$refs.ruleForm.clearValidate();
          
          this.$message.error("您已取消");
        })
        .catch((_) => {});
    },
    // 表单级联地址选择
    handleChange(value) {
      this.listForm.cityCode = value.join(",");
      this.listForm.province = CodeToText[value[0]];
      this.listForm.city = CodeToText[value[1]];
      this.listForm.region = CodeToText[value[2]];
    },
    // 删除当前地址
    delAddress(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          if (res == "confirm") {
            companyAddress(id).then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.init();
              }
            });
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 确认保存地址
    doSaveAddress() {
      var api;
      if (this.num) {
        api = save;
        this.listForm.receiveStatus = 0;
        this.listForm.sendStatus = 0;
      } else {
        api = update;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          api(this.listForm).then((res) => {
            if (res.success) {
              this.$message.success("成功");
              this.dialogVisible = false;
              this.init();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
      // 将之前表单状态保存,赋值给现在的
      
    },

    init() {
      addressList().then((res) => {
        if (res.success) {
          this.tableList = res.data.items;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
</style>